<template>
<view class="xxx">
     <view class="search-container">
    <view class="location-bar">
      <view class="location-text">
        <img src="" alt="">
        <text>杭州市梦想小镇</text>
        <img src="" alt="">
      </view>
    </view>
    <view class="search-input-bar">
      <input type="text" placeholder="永辉超市优惠商品" class="search-input" />
    </view>
  </view>
    <view class="image">
        <img src="static/assets/02.jpg" alt="">
    </view>
  <view class="change">
      <view class="item">
      <view class="img"><img src="static/assets/super.png" alt=""></view>
      <view><text class="title">超市便利</text></view>
    </view>
    <view class="item">
      <view class="img"><img src="static/assets/market.png" alt=""></view>
      <view><text class="title">菜市场</text></view>
    </view>
    <view class="item">
      <view class="img"><img src="static/assets/fruits.png" alt=""></view>
      <view><text class="title">水果店</text></view>
    </view>
    <view class="item">
      <view class="img"><img src="static/assets/flower.png" alt=""></view>
      <view><text class="title">鲜花绿植</text></view>
    </view>
    <view class="item">
      <view class="img"><img src="static/assets/drug.png" alt=""></view>
      <view><text class="title">医药健康</text></view>
    </view>
    <view class="item">
      <view class="img"><img src="static/assets/home.png" alt=""></view>
      <view><text class="title">家居时尚</text></view>
    </view>
    <view class="item">
      <view class="img"><img src="static/assets/cake.png" alt=""></view>
      <view><text class="title">烘焙蛋糕</text></view>
    </view>
    <view class="item">
      <view class="img"><img src="static/assets/sign.png" alt=""></view>
      <view><text class="title">签到</text></view>
    </view>
    <view class="item">
      <view class="img"><img src="static/assets/prestige.png" alt=""></view>
      <view><text class="title">大牌免运</text></view>
    </view>
    <view class="item">
      <view class="img"><img src="static/assets/red.png" alt=""></view>
      <view><text class="title">红包套餐</text></view>
    </view>
  </view>

  <view class="shoplist">

    <view class="shop">
    <view><text>附近店铺</text></view>
    <view><b><text @click="dianji1">查看更多</text></b></view>
  </view>
<view class="list">
   <view class="store-item" v-for="(store, index) in stores" :key="index">
      <img :src="store.imgUrl" class="store-logo" @click="dianji">
      <view class="store-info">
        <view><text class="store-name">{{store.name}}</text></view>
        <view><text class="store-data">月售: {{store.sales}}&nbsp; 起送: {{store.expressLimit}}&nbsp; 基础运费: {{store.expressPrice}}</text></view>
        <view><text class="coupon" v-if="store.slogan">{{store.slogan}}</text></view>
      </view>
    </view>
  </view>
  </view>

  
    
</view>
    
    
</template>

<script>
export default {
  data() {
    return {
      stores: []
    };
  },

  onReady() {
        uni.request({
            url: 'http://localhost:3000/hotlist',
            success: (res) => {
                console.log(res.data);
                this.stores = res.data;
            }
        });
    },
      methods: {
    dianji(store) {
      
        uni.navigateTo({
          url: '/pages/index/store-detail'
        });
      
    },
    dianji1(){
      uni.navigateTo({
          url: '/pages/index/more'
        });
    }
  }
 
  
};
</script>


<style scoped>
.xxx{
  border-radius: 8px;
}
.search-container {
  background-color: #007AFF;
  padding: 15px;
  height: 120px;
}

.location-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.location-icon {
  width: 20px;
  height: 20px;
}

.location-text {
  color: white;
  font-size: 16px;
  margin-left: 10px;
}

.notification-icon {
  width: 20px;
  height: 20px;
}

.search-input-bar {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 8px 12px;
  border-radius: 20px;
}
.search-input-bar input{
  height: 35px;
  width: 75%;
}

.input-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.search-input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

.image{
  margin-top: -30px;
    width: 100%;
    height: 150px;
    background-color: aquamarine;
}
.image img{
    width: 100%;
    height: 150px;
}
.shop{
  
  display: flex;
  justify-content: space-between;
    border-bottom: 1px solid #ccc;
  padding-top: 10px;
}

.store-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}

.store-logo {
  width: 80px;
  height: 80px;
}

.store-info {
  margin-left: 10px;
}

.store-name {
  font-size: 16px;
}

.store-data {
  font-size: 14px;
  color: #666;
}

.coupon {
  color: red;
  font-size: 14px;
}
.change {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(to bottom right, #1a87fc, #afd0ec); 
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item {
   width: 20%; 
   margin-top: 15px; 
  text-align: center;
}
.img img{
  width: 50px;
  height: 50px;
}


 .title {
    font-size: 15px;
    margin-top: 10px;
     color: #999;
  }

</style>




